<template>
  <div class="movie-container">
    <!-- this.$route是路由的参数对象 -->
    <!-- this.$router是路由的导航对象 -->

    <h3>Movie 组件 --- {{ this.$route.params.id }}---{{ id }} </h3>
    <button @click="showThis">打印this</button>
    <button @click="gotoMovie2">跳转到电影2</button>
    <button @click="gotoMovie3">跳转到电影3通过replace</button>
    <button @click="goback">后退</button>
    <!-- 在行内使用编程式导航跳转的时候，this必须要省略，否则会报错。 -->
    <button @click="$router.back()">back后退</button>
    <button @click="$router.forward()">forward前进</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 接收数据
  props:['id'],
  methods:{
    showThis(){
      console.log(this)
    },gotoMovie2(){
      // 通过编程式API，导航跳到指定的页面
      // this.$router.push()跳转到指定界面，并且增加一条记录
      // this.$router.replace() 跳转到指定界面,替代之前的界面
      this.$router.push('/movie/2')
    },
    gotoMovie3(){
      this.$router.replace('/movie/3')
    },
    goback(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  min-height: 200px;
  background-color: lightsalmon;
  padding: 15px;
}
</style>
